const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const webpack = require('webpack')
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const chalk = require('chalk')
const port = 9999;
const getIPAdress = () => {
    var interfaces = require('os').networkInterfaces();
    for (var devName in interfaces) {
        var iface = interfaces[devName];
        for (var i = 0; i < iface.length; i++) {
            var alias = iface[i];
            if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                return alias.address;
            }
        }
    }
}
let conlg = [];
conlg.push(chalk.blueBright.bold('Your application is running here: ') + chalk.greenBright.bold(`http://${getIPAdress()}:${port}/`));
conlg.push(chalk.blueBright.bold('Your application is running here: ') + chalk.greenBright.bold(`http://localhost:${port}/`));

module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "[hash].build.js"
    },
    entry: path.resolve(__dirname, './src/main.js'),
    stats: 'none',
    devServer: {
        hot: true,
        port,
        compress: true,
        client: {
            progress: true,
            overlay: true,
        },
    },
    optimization: {
        splitChunks: {
            minSize: 20000,
            maxAsyncRequests: 10,
            cacheGroups: {
                vendor: { // 抽离第三方插件
                    test: /node_modules/, // 指定是node_modules下的第三方包
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        }
    },
    resolve: {
        extensions: ['.vue', '.css', '.js', '.jsx', '.ts'],
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader'
                }
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new FriendlyErrorsWebpackPlugin({
            compilationSuccessInfo: {
                messages: conlg
            },
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './public/index.html')
        }),
        new ProgressBarPlugin(
            {
                format: chalk.blueBright('  build :bar :percent (:elapsed seconds) '),
                clear: true,
                summary: false,
                customSummary: res => {
                    process.stderr.write(chalk.blueBright('   '))
                }
            }
        ),
    ]
}